import React from 'react';
import { Player } from '../types/game';
import { RotateCcw, ArrowLeft, Clock } from 'lucide-react';
import { Piece } from './Piece';

interface GameControlPanelProps {
  currentPlayer: Player;
  moveCount: number;
  gameMode: 'pvp' | 'ai';
  onReset: () => void;
  onBackToMode: () => void;
  isAIThinking?: boolean;
}

export const GameControlPanel: React.FC<GameControlPanelProps> = ({
  currentPlayer,
  moveCount,
  gameMode,
  onReset,
  onBackToMode,
  isAIThinking = false,
}) => {
  const getPlayerName = (player: Player): string => {
    if (player === 'black') return '黑棋';
    if (player === 'white') return '白棋';
    return '';
  };

  const getPlayerDescription = (player: Player): string => {
    if (gameMode === 'ai') {
      if (player === 'black') return '你';
      if (player === 'white') return 'AI';
    } else {
      if (player === 'black') return '玩家1';
      if (player === 'white') return '玩家2';
    }
    return '';
  };

  return (
    <div className="w-control-panel bg-neutral-100 rounded-lg p-6 space-y-6 shadow-card">
      {/* 当前玩家指示 */}
      <div className="text-center">
        <div className={`
          inline-flex items-center space-x-3 px-4 py-2 rounded-full transition-all duration-normal
          ${currentPlayer === 'black' ? 'bg-neutral-900 text-white' : 'bg-white border-2 border-neutral-200'}
          ${isAIThinking ? 'opacity-50' : ''}
        `}>
          <Piece player={currentPlayer} size="small" />
          <span className="font-medium">
            {isAIThinking ? 'AI思考中...' : `${getPlayerName(currentPlayer)}回合`}
          </span>
        </div>
        <p className="text-small text-neutral-500 mt-2">
          {getPlayerDescription(currentPlayer)}
        </p>
      </div>

      {/* 游戏信息 */}
      <div className="space-y-4">
        {/* 步数 */}
        <div className="bg-white rounded-lg p-4 text-center">
          <div className="text-timer font-mono text-neutral-900">
            第 {moveCount} 步
          </div>
          <div className="text-small text-neutral-500 mt-1">
            总步数
          </div>
        </div>

        {/* 游戏模式 */}
        <div className="bg-white rounded-lg p-4 text-center">
          <div className="text-body font-medium text-neutral-900">
            {gameMode === 'ai' ? '人机对战' : '双人对战'}
          </div>
          <div className="text-small text-neutral-500 mt-1">
            游戏模式
          </div>
        </div>
      </div>

      {/* 操作按钮 */}
      <div className="space-y-3">
        <button
          onClick={onReset}
          className="
            w-full flex items-center justify-center space-x-2
            bg-primary-500 hover:bg-primary-600
            text-white font-semibold py-3 px-4 rounded-md
            transition-all duration-fast
            hover:transform hover:-translate-y-0.5
            focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
            disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none
          "
          disabled={isAIThinking}
        >
          <RotateCcw className="w-4 h-4" />
          <span>重新开始</span>
        </button>

        <button
          onClick={onBackToMode}
          className="
            w-full flex items-center justify-center space-x-2
            bg-neutral-200 hover:bg-neutral-300
            text-neutral-700 font-semibold py-3 px-4 rounded-md
            transition-all duration-fast
            focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2
            disabled:opacity-50 disabled:cursor-not-allowed
          "
          disabled={isAIThinking}
        >
          <ArrowLeft className="w-4 h-4" />
          <span>返回模式选择</span>
        </button>
      </div>

      {/* 游戏提示 */}
      <div className="bg-primary-50 rounded-lg p-4">
        <div className="flex items-start space-x-2">
          <div className="w-2 h-2 bg-primary-500 rounded-full mt-2 flex-shrink-0"></div>
          <div className="text-small text-primary-700">
            {isAIThinking ? (
              'AI正在思考最佳策略，请稍候...'
            ) : (
              gameMode === 'ai' ? (
                currentPlayer === 'black' ? '轮到你了，点击棋盘交叉点下棋' : 'AI回合，请等待'
              ) : (
                '轮流下棋，率先连成五子者获胜'
              )
            )}
          </div>
        </div>
      </div>
    </div>
  );
};